<template>
  <view class="contact-information-container">
    <customtop top_title="联系方式"></customtop>
    <view class="hint">
      <image
        class="icon"
        src="../../static/images/hint-icon.png"
        mode="scaleToFill"
      />
      <text> 发帖后，将自动同步此处联系方式 </text>
    </view>
    <view class="form">
      <view class="form-item">
        <view class="label">手机号（必填）</view>
        <input type="number" class="text-input" v-model="userForm.phone" />
      </view>
      <view class="form-item">
        <view class="label">微信号（必填）</view>
        <input type="text" class="text-input" v-model="userForm.weixin" />
      </view>
      <view class="form-item">
        <view class="label">QQ号（必填）</view>
        <input type="number" class="text-input" v-model="userForm.qq" />
      </view>
    </view>
    <view class="btn" @click="submit">
      <text>保存</text>
    </view>
    <!-- <view class="title"> VIP用户专享 </view>
    <view class="form">
      <view class="form-item">
        <view class="label">钉钉号（选填）</view>
        <input type="text" class="text-input" />
      </view>
      <view class="form-item">
        <view class="label">企业微信二维码（必填）</view>
        <view class="upload-box" @click="chooseImg" v-if="imgUrl">
          <u-icon name="plus" color="#a8a9ad" size="20"></u-icon>
          <view class="text">上传二维码</view>
        </view>
        <image
          v-else
          @click="chooseImg"
          class="img"
          src="../../static/images/add.png"
          mode="scaleToFill"
        />
      </view>
    </view> -->
  </view>
</template>
<script>
import customtop from "@/components/customtop.vue";
import { request } from "@/utils/http.js";
export default {
  components: { customtop },
  data() {
    return {
      user: {},
      userForm: {
        phone: null,
        weixin: null,
        qq: null,
      },
      imgUrl: "",
    };
  },
  onLoad(options) {
    this.getUser();
  },
  methods: {
    getUser() {
      request.post("/user/getLoginUser").then((res) => {
        console.log(res.data);
        if (res.data.id) {
          this.user = res.data;
          this.userForm.phone = this.user.phone;
          this.userForm.weixin = this.user.weixin;
          this.userForm.qq = this.user.qq;
        }
      });
    },
    chooseImg() {},
    submit() {
      if (!/^1[3456789]\d{9}$/.test(this.userForm.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return false;
      }
      if (this.userForm.weixin.length < 6 || this.userForm.qq.length < 6) {
        uni.showToast({
          title: "请输入正确的号码",
          icon: "none",
        });
        return false;
      }
      request
        .post("/xiangmushe/setUserContactInfo", this.userForm)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack(-1);
            }, 1000);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.contact-information-container {
  .hint {
    margin: 20rpx auto;
    width: 700rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5rpx solid #e5e5e5;
    padding: 20rpx 0;
    box-sizing: border-box;
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #6a6a6a;
    .icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }
  }
  .form {
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    .form-item {
      .label {
        font-size: 26rpx;
        margin-top: 15rpx;
      }
      .text-input {
        border-bottom: 1rpx solid #f9f9f9;
        height: 60rpx;
      }
      .upload-box {
        width: 200rpx;
        height: 200rpx;
        background-color: #f3f4f8;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #cfd0d4;
        margin-top: 8rpx;
      }
      .img {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
  .title {
    font-size: 28rpx;
    margin-left: 30rpx;
  }
  .btn {
    height: 70rpx;
    font-size: 30rpx;
    background-color: #3198fe;
    line-height: 70rpx;
    width: 450rpx;
    margin: 80rpx auto;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
  }
}
</style>

<style>
page {
  background-color: #fff;
}
</style>
